<template>
  <div class="p-lr-15" v-if="show">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <div v-if="data.type === 'grid'">
        <GridSetting :data="data"></GridSetting>
      </div>
      <div
        v-else-if="
          data.type === 'table' ||
          data.type === 'echart' ||
          data.type === 'tagGroup'
        "
      >
        <TableSetting :data="data" :formData="formData"></TableSetting>
      </div>

      <div v-else-if="data.type === 'button'">
        <ButtonSetting :data="data" :formData="formData"></ButtonSetting>
      </div>
      <div v-else-if="data.type === 'alert'">
        <AlertSetting :data="data" :formData="formData"></AlertSetting>
      </div>
      <div v-else-if="data.type === 'pageHeader'">
        <NavcrumbSetting :data="data" :formData="formData"></NavcrumbSetting>
      </div>
    </a-form>
  </div>
</template>

<script>
  import {
    EchartSetting,
    GridSetting,
    TableSetting,
    ButtonSetting,
    AlertSetting,
    NavcrumbSetting,
  } from './ComponentSetting/index'

  export default {
    components: {
      EchartSetting,
      GridSetting,
      TableSetting,
      ButtonSetting,
      AlertSetting,
      NavcrumbSetting,
    },
    // eslint-disable-next-line vue/require-prop-types
    props: ['data', 'formData'],

    computed: {
      show() {
        if (this.data && Object.keys(this.data).length > 0) {
          return true
        }
        return false
      },
    },
  }
</script>

<style scoped>
  .optionsClass {
    font-size: 16px;
    margin-right: 5px;
    cursor: move;
  }
</style>
